<template>
	<div class="all_reply_content">

		<div class="all_reply_matter ">

			<div class="all_reply_head">

				<router-link :to="{path:'/clips/clips_comment/clips_comment_gods'}" class='back_up'>
					<div class="back_tab"></div>
				</router-link>
				<h1>全部回复</h1>
			</div>

			<div class="god_prefect_icon clearFix" v-for="(data,index) in userData" key="index">

				<div class="god_prefect_icon_left"></div>

				<div class="god_prefect_user">

					<h3>{{data.user}}</h3>

					<p><span>{{data.home}}</span>&nbsp;<span>{{data.time}}</span></p>

				</div>

				<div class="god_prefect_like ">
					<p>{{data.like}}</p>
				</div>

				<div class="god_prefect_share " @click='fadeToggle(index)'>

					<reply class='reply_share'></reply>
					
				</div>
				
				<div class="clear"></div>
				<div class="god_prefect_content">
					{{data.content}}
				</div>

			</div>			

			<div class="clips_comment_gods_box">
				<div class="comment_gods_box_input">

					<input type="text" name="" placeholder="请输入回复内容...">

					<div class="box_input_icon">

					</div>
				</div>
			</div>

		</div>
		
		<div class="reply_inform" @click="inform">
			
			
		</div>

	</div>
</template>

<script>
	import reply from './reply_component/reply.vue';

	export default {

		name: 'clips',
		data() {
			return {

				flage: false,
				userData: [

					{
						user: '脑残粉^_*',

						home: '32楼',

						time: new Date().toLocaleString().split(' ')[0].replace(/[\/]/g, '-'),

						like: 506,

						content: '我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！'

					},
					{
						user: '脑残粉^_*',

						home: '32楼',

						time: new Date().toLocaleString().split(' ')[0].replace(/[\/]/g, '-'),

						like: 506,

						content: '我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！'

					},
					{
						user: '脑残粉^_*',

						home: '32楼',

						time: new Date().toLocaleString().split(' ')[0].replace(/[\/]/g, '-'),

						like: 506,

						content: '我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！'

					},
					{
						user: '脑残粉^_*',

						home: '32楼',

						time: new Date().toLocaleString().split(' ')[0].replace(/[\/]/g, '-'),

						like: 506,

						content: '我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！'

					},
					{
						user: '脑残粉^_*',

						home: '32楼',

						time: new Date().toLocaleString().split(' ')[0].replace(/[\/]/g, '-'),

						like: 506,

						content: '我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！'

					},
					{
						user: '脑残粉^_*',

						home: '32楼',

						time: new Date().toLocaleString().split(' ')[0].replace(/[\/]/g, '-'),

						like: 506,

						content: '我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！'

					}

				]
			}
		},
		methods: {
			inform(){
				var reply_inform = document.querySelector('.reply_inform');
				
				reply_inform.style.display ='none';
				
				var all_reply_matter =document.querySelector('.all_reply_matter');
				
				all_reply_matter.className = 'all_reply_matter';
				
			},
			fadeToggle(index) {
				
				var reply_share = document.querySelectorAll('.reply_share')
				
				for(var i in reply_share){
					
					if(reply_share[i]==reply_share[index]){
								
						if(this.flag){
							
							reply_share[i].style.display ='';
							 
							 this.flag = false;
						}
						else{
							reply_share[i].style.display ='block';
							
							this.flag = true;
						}
						
					}
					
				}
				
			}

		},
		components: {

			reply

		}
	}
</script>

<style type="text/css" lang='less' scoped>

	.reply_inform{
		
		height:450/64rem;
		
		width:600/640*100%;
		
		position: fixed;
		
		background: white;
		
		border-radius: 10/64rem;
		
		top:0;
		
		left:0;
		
		right: 0;
		
		bottom: 0;
		
		margin: auto;
		
		display: none;

	}
	.all_reply{
		
		background: rgba(169,166,174,0.5);
		
	}
	.reply_share{
		
		display: none;
		
		
	}
	.all_reply_matter {
		.all_reply_head {
			background: rgb(165, 75, 232);
			height: 60/64rem;
			width: 100%;
			position: relative;
			border-top: 1/64rem solid transparent;
			.back_tab {
				height: 50/64rem;
				width: 50/64rem;
				background: url('../../../../static/images/14/back_button.png');
				background-size: contain;
				position: absolute;
				left: 40/64rem;
				top: 10/64rem;
			}
			h1 {
				font-size: 25/64rem;
				color: white;
				text-align-last: center;
				margin-top: 15/64rem;
			}
		}
		/*精彩评论样式*/
		.god_prefect_icon {
			.god_prefect_icon_left {
				height: 65/64rem;
				width: 65/64rem;
				background: url('../../../../static/images/11/head1.png') no-repeat;
				background-size: 65/64rem 65/64rem;
				margin-top: 30/64rem;
				margin-left: 30/64rem;
				float: left;
			}
			.god_prefect_user {
				float: left;
				margin-left: 20/64rem;
				h3 {
					font-size: 25/64rem;
					color: #b676eb;
					margin-top: 35/64rem;
				}
				p {
					color: #959595;
					;
					font-size: 24/64rem;
					margin-top: 8/64rem;
					span:nth-child(2) {
						margin-left: 20/64rem;
					}
				}
			}
			.god_prefect_like {
				cursor: pointer;
				float: left;
				margin-top: 60/64rem;
				margin-left: 70/64rem;
				font-size: 25/64rem;
				color: #959595;
				p::before {
					content: '';
					display: inline-block;
					height: 24/64rem;
					width: 24/64rem;
					background: url('../../../../static/images/11/zan_btn_normal.png') no-repeat;
					background-size: 24/64rem 24/64rem;
					padding-left: 13/64rem;
				}
			}
			.like_active {
				p {
					color: #b676eb;
					&::before {
						content: '';
						display: inline-block;
						height: 24/64rem;
						width: 24/64rem;
						background: url('../../../../static/images/11/zan_btn_selected.png') no-repeat;
						background-size: 24/64rem 24/64rem;
						padding-left: 13/64rem;
					}
				}
			}
			.god_prefect_share {
				float: right;
				background: url('../../../../static/images/11/more_btn_pressed.png') no-repeat;
				background-size: 60/64rem 40/64rem;
				height: 40/64rem;
				width: 60/64rem;
				margin-top: 50/64rem;
				margin-right: 40/64rem;
				position: relative;
				&::before {
					content: '';
					display: block;
					position: absolute;
					height: 12/64rem;
					width: 12/64rem;
					border-bottom: 1/64rem solid rgb(208, 200, 222);
					border-left: 1/64rem solid rgb(208, 200, 222);
					top: 15/64rem;
					left: 1/64rem;
					background: rgb(250, 247, 255);
					-webkit-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}
			.god_prefect_content {
				width: (490)/640*100%;
				margin-left: 110/64rem;
				margin-top: 30/64rem;
				font-size: 30/64rem;
				color: #313131;
				&::after {
					content: '';
					display: block;
					height: 1/64rem;
					width: 600/64rem;
					background: url('../../../../static/images/11/division.png') no-repeat;
					background-size: 600/64rem 1/64rem;
					margin-top: 48/64rem;
					margin-left: -85/64rem;
				}
			}
		}
		.clips_comment_gods_box {
			margin-top: 12/64rem;
			padding-top: 10/64rem;
			height: 80/64rem;
			width: 105%;
			margin-left: -15/64rem;
			background: url('../../../../static/images/11/down_background.png') no-repeat;
			.comment_gods_box_input {
				height: 65/64rem;
				width: (640-60)/640*100%;
				margin: 0 auto;
				background: url('../../../../static/images/11/bottom_input.png') no-repeat;
				border-radius: 10/64rem;
				position: relative;
				.box_input_icon {
					height: 40/64rem;
					width: 40/64rem;
					background: url('../../../../static/images/11/bottom_input_icon.png') no-repeat;
					background-size: cover;
					position: absolute;
					top: 15/64rem;
					left: 10/64rem;
				}
				input {
					height: 65/64rem;
					width: 100%;
					border-radius: 10/64rem;
					outline: none;
					color: #7b7781;
					font-size: 26/64rem;
					text-indent: 70/64rem;
					border: 0;
				}
			}
		}
	}
	
	.clear {
		clear: both;
	}
	
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}
	
	body {
		line-height: 1;
	}
	
	ol,
	ul {
		list-style: none;
	}
	
	blockquote,
	q {
		quotes: none;
	}
	
	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	a {
		color: inherit;
		text-decoration: none;
	}
	
	body {
		background: #f0f2f5;
		font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
		font-size: 25/64rem;
		color: #444;
	}
</style>